<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="xg.css">
    <style>
        .user_01{
            width:100%;
            float:left;
            margin-top:30px;
        }
        .user_01 .ul_01{
            height:36px;
            line-height:36px;
            padding-left:38px;
            background:url(img/user_01.png) no-repeat 0 0;
            font-size:32px;
            color:#231815;
        }
        .user_02{
            width:1198px;
            border:1px solid #c8c9ca;
            float:left;
            background:#fff url(img/user_02.png) left repeat-y;
            border-radius:5px;
        }
        .user_03{
            width:450px;
            float:left;
            padding-bottom:50px;
        }
        .user_03 .ul_01{
            width:100%;
            float:left;
        }
        .user_03 .ul_01 li{
            width:100%;
            float:left;
            height:60px;
            line-height:60px;
            text-align:center;
            border-bottom:1px solid #c8c9ca;
        }
        .user_03 .ul_01 a{
            width:100%;
            display:block;
            line-height:60px;
            font-size:24px;
            color:#231815;
        }
        .user_03 .ul_01 a:hover{
            background:#58b9e1;
        }
        .user_03 .ul_01 .this{
            background:#58b9e1;
        }
        .user_03 .ul_02{
            width:310px;
            float:left;
            padding-left:70px;
        }
        .user_03 .ul_02 li{
            width:100%;
            float:left;
        }
        .user_03 .ul_02 .li_cjid{
            font-size:18px;
            color:#231815;
            margin-top:86px;
        }
        .user_03 .ul_02 .li_ms{
            font-size:14px;
            color:#888888;
            margin-top:30px;
            line-height:32px;
        }
        .user_03 .ul_02 .li_xieyi{
            font-size:14px;
            color:#58b9e1;
            margin-top:10px;
        }
        .user_03 .ul_02 .li_xieyi a{
            color:#58b9e1;
            float:left;
            height:32px;
            line-height:32px;
            background:url(img/user_04.png) no-repeat 100% 9px;
            padding-right:15px;
        }
        .user_04{
            width:748px;
            float:left;
            padding-bottom:50px;
        }
        .user_04 .textarea_01{
            width:360px;
            height:140px;
            float:left;
            border-radius:5px;
            border:1px solid #c8c9ca;
            resize:none; outline:none;
            background:#fff;
            padding:10px;
            font-size:18px;
        }
        .user_04 .textarea_01:hover{
            border:1px solid #58b9e1;
        }
        .user_04 .textarea_01:focus{
            border:1px solid #58b9e1;
        }
        .user_04 .jl_pic{
            width:100%;
            text-align:center;
            float:left;
            margin-top:45px;
        }
        .user_04 .jl_pic img{
            width:211px;
            height:211px;
        }
        .user_04 .jl_pic .li_img{
            width:100%;
            float:left;
            text-align:center;
        }
        .user_04 .jl_pic .li_text{
            width:100%;
            float:left;
            line-height:40px;
            color:#dbdcdc;
            font-size:24px;
            text-align:center;
        }
        .user_04 .ul_01{
            width:100%;
            text-align:center;
            float:left;
            margin-top:45px;
        }
        .user_04 .ul_01 img{
            width:211px;
            height:211px;
            border:2px solid #c8c9ca;
            border-radius:211px;
        }
        .user_04 .ul_01 .li_img{
            width:100%;
            float:left;
            text-align:center;
        }
        .user_04 .ul_01 .li_text{
            width:100%;
            float:left;
            line-height:40px;
            color:#dbdcdc;
            font-size:24px;
            text-align:center;
        }
        .user_04 .ul_02{
            width:748px;
            float:left;
        }
        .user_04 li{
            float:left;
            position:relative;
        }
        .user_04 .wenben_01{
            width:100px;
            height:40px;
            line-height:40px;
            position:absolute;
            z-index:1;
            color:#9d9d9e;
            font-size:18px;
            text-align:right;
            top:0;
            right:10px;
        }
        .user_04 .wenben_02{
            position:absolute;
            right:10px;
            width:100px;
            top:0px;
            height:40px;
            z-index:2;
            filter:alpha(opacity=0);
            opacity:0;
            cursor:pointer;
        }
        .user_04 .li_zdmc{
            width:220px;
            text-align:right;
            padding-right:10px;
            height:42px;
            line-height:42px;
            font-size:18px;
        }
        .user_04 .input_moren{
            width:360px;
            height:20px;
            float:left;
            border-radius:5px;
            border:1px solid #c8c9ca;
            background:#fff;
            padding:10px;
        }
        .user_04 .input_moren:hover{
            border:1px solid #58b9e1;
        }
        .user_04 .input_moren:focus{
            border:1px solid #58b9e1;
        }
        .user_04 .qrxg{
            width:120px;
            height:42px;
            border:0;
            background:url(img/sz_tj01.png) no-repeat;
            line-height:42px;
            text-align:center;
            cursor:pointer;
            outline:none;
            color:#231815;
            font-size:16px;
        }
        .user_04 .tj_cz{
            width:81px;
            height:30px;
            border:0px;
            background:url(img/lz_anniu.png) no-repeat;
            text-align:center;
            cursor:pointer;
            outline:none;
            color:#000000;
            font-size:16px;
        }
        .user_04 .li_anniu{
            width:612px;
        }
        .user_04 .cuowu_nr{
            width:50%;
            float:left;
            color:#ea0000;
            padding-left:230px;
            margin-top:10px;
            font-weight:bold;
        }
        .width_1200{
            width: 1200px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 0;
        }
    </style>

</head>
<body>

<div id="top_nav">
    <div class="clear"></div>
</div>
<div class="width_1200">
    <div class="user_01"><ul class="ul_01">Shoe Shop User ID</ul></div>
    <div class="user_02 mt_20">
        <div class="user_03">
            <ul class="ul_02">
                <li class="li_cjid">重设密码</li>
                <li class="li_ms">
                    您可以通过提供一些信息来更改或重设Shoe Shop User ID 帐户密码。
                </li>
            </ul>
        </div>
        <!--左边结束-->
        <div class="user_04">
            <form>
                <ul class="ul_02 mt_50">
                    <li class="li_zdmc">请输入绑定的手机号码</li>
                    <li><input id="phone" type="text" class="input_moren" style="width:230px;"/></li><li class="pl_10"><input id="btnSendCode" type="button" class="qrxg" value="获取验证码" onclick="sendMessage()"/></li>
                    <span id='timeshort'></span>
                </ul>
                <ul class="ul_02 mt_15">
                    <li class="li_zdmc">请输入验证码</li>
                    <li><input type="text" class="input_moren" /></li>
                    <li class="tanhao"></li>
                    <li class="cuowu_nr">请输入验证码</li>
                </ul>
                <ul class="ul_02 mt_15">
                    <li class="li_zdmc">输入新密码</li>
                    <li><input type="password" class="input_moren" id="pwd" onblur="checkPwd()" /></li>
                    <span><div id="pwd_prompt"> 密码由英文字母和数字组成的4-10位字符</div></span>
                </ul>
                <ul class="ul_02 mt_15">
                    <li class="li_zdmc">确认新密码</li>
                    <li><input type="password" class="input_moren" id="repwd" onblur="checkRepwd()" /></li>
                    <span><div id="repwd_prompt"></div></span>
                </ul>
                <ul class="ul_02 mt_15"><li class="li_anniu"><input type="button" class="qrxg" style="float:right;" value="确定修改" onclick=""/></li></ul>
            </form>
        </div>
    </div>
    <div class="w_100_h_20">&nbsp;</div>
    <div class="clear"></div>
</div>
<!--内容结束版权开始-->
<div class="width_100bfb">
    <div class="footer_01">
        <div class="width_1200">
            <ul class="ul_01">
                <a href="login/login.html">
                    <img src="img/HyLogo.png" />
                </a>
            </ul>
            <ul class="ul_02">
                <li>
                    <a href="#">关于我们</a><span>|</span><a href="#">隐藏政策</a><span>|</span><a href="#">使用条款</a><span>|</span><a href="#">销售政策</a><span>|</span>
                    <a href="#">网站地图</a><span>|</span><a href="#">APP下载</a>
                </li>
            </ul>
            <ul class="ul_03">Copyright © 2004-2020  火云鞋神HY.com 版权所有</ul>
            <ul class="ul_03">京公安:2222号,ICP:42423号</ul>
        </div>
    </div>
    <div class="clear"></div>
</div>

<script src="Jquery/jquery-3.3.1.js"></script>
<script src="xg.js"></script>
</body>
</html>